/*
      FILE:  BicycleClub.css
             ---------------

      CSS for a two floated column fixed-width layout with a header and footer.
Note that the header itself is now formatted as two columns, one for the
logo, one for the photo.

*/

/*======================================================================*/
/*  PAGE-LEVEL FORMATTING                                               */
/*======================================================================*/

body
{
  text-align: center;
  background: #B0BFC2;
  color: #444;
  font-family: Arial, Verdana, sans-serif;
}
  
.clearfloats
{
  clear: both;
}

#container
{
  text-align: left;
  margin: 0 auto;
  width: 760px;
  background: #FFF url(images/nav-back.gif) repeat-y;
}

#container h1
{
  float: right;
}

/*======================================================================*/
/*  HEADER FORMATTING                                                   */
/*======================================================================*/

/*  The actual PNG image  */

#logo
{
  float: left;
}

/*  Photo for right side of the header, scaled to fit  */

#photo
{
  float: right;
  width: 35em;
  height: 14em;
}

.logo_text1
{
  font-family: Impact, Arial, Verdana, sans-serif;
  font-size: 28pt;
  font-style: bold;
  color: #3366FF;  /*  LogoBlue  */
  float: left;
}

.logo_text2
{
  font-family: Impact, Arial, Verdana, sans-serif;
  font-size: 21pt;
  font-style: bold;
  color: #FF9900;  /*  LogoOrange  */
  float: left;
}

p.logo_text1, p.logo_text2
{
  margin: 0;
}

/*  Left column for header.  This should have the same width */
/*  as the left column below the menu.                       */

#header_left 
{ 
  /* move navigation next to content */ 
  
  float: left; 
  width: 160px;
  
  /* fixes IE Double Margin Float bug */ 
  
  display: inline; 
  margin-left: 20px; 
  padding: 15px 0; 
}

/*  Right column for header.  This should have the same width */
/*  as the right column below the menu.  It will only contain */
/*  the site's photo.                                         */

#header_right
{
  text-align: left;
  margin: 0 auto;
  width: 760px;
  background: #FFF url(images/nav-back.gif) repeat-y;
}

h1 
{ 
  /* background: #D36832; */
  background: #FF9900;  /*  LogoOrange  */
  /* color: #FFF; */
  color: #3366FF;  /*  LogoBlue  */
  padding: 20px; 
  margin: 0; 
  border-bottom: 5px solid #3366FF; 
} 
 
h2 
{ 
  margin-top: 0; 
  /* color: #B23B00;  */
  color: #FF9900;  /*  LogoOrange  */
  font-weight: bold; 
}   

/*======================================================================*/
/*  MENU FORMATTING                                                     */
/*======================================================================*/

/*  Note that ALL of the elements below (div#menu,  */
/*  div#menu ul, and div#menu a) MUST be floated  */
/*  in order for the horzontal menu to be displayed   */
/*  properly.                                         */

div#menu 
{ 
  float: left; 
  color: #000; 
  /*
  border-top: 5px solid #387A9B; 
  border-bottom: 5px solid #387A9B; 
  */
  border-top: 5px solid #3366FF; 
  border-bottom: 5px solid #3366FF; 
  background: #D36832; 
  width: 100%; 
}

div#menu ul 
{ 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
  float: left; 
  width: 100%; 

  /*  Force a scrollbar to appear (and menu wrapping NOT to occur)  */
  /*  if the browser width is narrower than the menu width.         */

  /*  Use after fixing two-line menu items  */
  /* width: 40em; */
}

/*  Make the list display horizontally  */

div#menu li 
{ 
  display: inline; 
}

/*  Style _links_ to resemble buttons  */

div#menu a 
{ 
  display: block; 
  float: left; 
  padding: .2em 1em; 
  text-decoration: none; 
  color: #FFF; 
  /* background: #D36832; */
  background: #FF9900;  /*  LogoOrange  */
  /* border-right: 1px solid #fff;  */
  border-right: 1px solid #FFF; 
  font-family: Arial, Verdana, sans-serif;
  font-weight: bold;
  font-size: 10pt;

  /*  Make each button the same width and center the text.  */
  /*  This actually makes the menu safer for browsers that  */
  /*  get flaky when no width is defined for a float.       */

  width: 5em; 
  text-align: center;
}

/*  Make the links change color during mouse rollver  */

div#menu a:hover 
{ 
  /* color: #000;  */
  color: #FF9900;  /*  LogoOrange  */
  /* background: #69C; */
  background: #3366FF;  /*  LogoBlue  */
  font-style: italic;
}

/*======================================================================*/

#nav 
{ 
  /* move navigation next to content */ 
  
  float: left; 
  width: 250px; 
  
  /* fixes IE Double Margin Float bug */ 
  
  display: inline; 
  margin-left: 20px;
  padding: 15px 0; 
}

#nav ul 
{ 
  /* border: 1px solid black; */ /* remove after debug */ 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
  text-align: left; 
}   

/*  This stuff is not needed unless you want to have  */
/*  a weirdly styled list                             */

#nav li 
{ 
  background: url(images/nav-bullet.gif) 
  
  /* place against the right edge and 0.4em from the top */ 
  
  no-repeat 100% .4em; 
  
  /* move away from image on right and add space at bottom */ 
  
  padding: 0 10px 5px 0; 
}

/*
 The content DIV is floated left to sit next to the navigation. A width 
 is added and the margin is adjusted to create a "gutter". Padding is 
 added to top and bottom for a more pleasing look. The footer will need 
 to be cleared since both the navigation and the content are floated to 
 make sure it stays below them both.
*/

#content 
{ 
  float: left; 
  width: 475px; 
  margin-left: 15px;  /*  Normally 45px  */ 
  padding: 15px 0; 
} 

#footer 
{ 
  clear: both; 
  /* background: #387A9B; */
  background: #3366FF;  /*  LogoBlue  */
  color: #fff; 
  padding: 5px 10px; 
  text-align: center; 
  font-size: 80%; 
} 

a:link 
{ 
  color: #175B7D; 
} 

a:visited 
{ 
  color: #600; 
}   

a:hover, a:active 
{ 
  color: #fff; 
  background: #175B7D; 
} 

